<template>
	<!-- 修改手机号 -->
	<view class="content">
		<view class="phoneNum">
			<span>+86</span>
			<input type="number" v-model="phoneNum" placeholder="请输入手机号" maxlength="11"
			placeholder-style="font-size: 14px;color: #1A1A1A;">
		</view>
		<view class="verify">
			<input type="number" v-model="verifyCode" placeholder="请输入验证码" maxlength="6"
			placeholder-style="font-size: 14px;color: #1A1A1A;">
			<view class="">
				<button id="btn" :style="verifyCodeSend?'background: #D9D9D9;color: #FFFFFF;':''" @click="sendVerifyCode">获取验证码{{verifyCodeSend?'('+restTime+')':''}}</button>
			</view>
		</view>
		<button :style="allowSubmit?'background: #08C8BD;color: #FFFFFF;':''">确认更换绑定手机</button>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phoneNum:'',				//手机号码
				verifyCode:'',				//验证码
				
				verifyCodeSend:false,		//验证码是否发送？
				restTime:0,				//重发验证码剩余时间
				
				allowSubmit:false,		//输入信息格式是否正确？
			}
		},
		watch:{
			phoneNum(){
				if(this.phoneNum.length===11&&this.verifyCode.length>=4){
					this.allowSubmit=true;
				}else{
					this.allowSubmit=false;
				}
			},
			verifyCode(){
				if(this.phoneNum.length===11&&this.verifyCode.length>=4){
					this.allowSubmit=true;
				}else{
					this.allowSubmit=false;
				}
			}
		},
		methods: {
			sendVerifyCode(){
				//发送验证码
				if(!this.verifyCodeSend){
					this.verifyCodeSend=true;
					this.restTime=60;
					
					let timer=setInterval(()=>{
						this.restTime--;
						if(this.restTime===0){
							this.verifyCodeSend=false;
							clearInterval(timer);
						}
					},1000)
				}
				
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.content{
		width: 100%;
		min-height: 100vh;
		padding: 1px 0;
		background-color: #FFFFFF;
		
		.phoneNum{
			padding: 32rpx 0;
			margin: 0 32rpx;
			display: flex;
			border-bottom: 1px solid #F5F5F5;
			>span{
				padding-right: 20rpx;
				border-right: 1px solid #AAAAAA;
			}
			>input{
				padding-left: 20rpx;
				width: 520rpx;
			}
		}
		
		.verify{
			width: 686rpx;
			padding: 20rpx 0;
			margin: 0 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #F5F5F5;
			>input{
				width: 300rpx;
			}
			>view{
				>button{
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 0 10rpx;
					height: 72rpx;
					background: #08C8BD;
					border-radius: 16rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}
			}
			
		}
	
		>button{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 686rpx;
			height: 96rpx;
			margin: 32rpx;
			margin-top: 96rpx;
			background: #EDEDED;
			border-radius: 16rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #656565;
		}
	
	
	}
</style>
